<template>
  <div>
    <div class="point panel">
      <div class="inner">
        <h3>点位分布统计</h3>
        <div class="chart">
          <div class="pie" ref="pie"></div>
          <div class="data">
            <div class="item">
              <h4>120,899</h4>
              <span>
                <i class="icon-dot" style="background-color: #ed3f35"></i>
                点位总数
              </span>
            </div>
            <div class="item">
              <h4>248</h4>
              <span>
                <i class="icon-dot" style="background-color: #eacf19"></i>
                本月新增
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    async mounted(){
        let myChart = this.$echarts.init(this.$refs.pie);
        myChart.setOption(this.option)
        window.addEventListener('resize',()=>myChart.resize())  // 根据窗口收缩尺寸
    },
    data(){
        return{
          option: {
              tooltip: {
                  trigger: "item",
                  formatter: "{a} <br/>{b} : {c} ({d}%)",
                  borderWidth:0,
              },
              // 注意颜色写的位置
              color: [
                  "#006cff",
                  "#60cda0",
                  "#ed8884",
                  "#ff9f7f",
                  "#0096ff",
                  "#9fe6b8",
                  "#32c5e9",
                  "#1d9dff"
              ],
              series: [
                  {
                      name: "点位统计",
                      type: "pie",
                      // 如果radius是百分比则必须加引号
                      radius: ["10%", "70%"],  // 半径
                      center: ["50%", "50%"],  // 饼图中心
                      roseType: "radius",
                      data: [
                          {value: 20, name: "云南",label:{color:'#006cff'}},
                          {value: 26, name: "北京",label:{color:'#60cda0'}},
                          {value: 24, name: "山东",label:{color:'#ed8884'}},
                          {value: 25, name: "河北",label:{color:'#ff9f7f'}},
                          {value: 20, name: "江苏",label:{color:'#0096ff'}},
                          {value: 25, name: "浙江",label:{color:'#9fe6b8'}},
                          {value: 30, name: "四川",label:{color:'#32c5e9'}},
                          {value: 42, name: "湖北",label:{color:'#1d9dff'}}
                      ],
                      // 修饰饼形图文字相关的样式 label对象
                      label: {
                          fontSize: 12,  // label标签大小
                          formatter:'{b}\n{d}%',  // 标签内容格式
                      },
                      // 修饰引导线样式
                      labelLine: {
                          // 连接到图形的线长度
                          length: 2,
                          length2:2, // 连接第二段长度
                      }
                  }
              ]
          }
        }
    }
};
</script>

<style scoped>
.point {
  height: 5.3rem;
}
.point .chart {
  display: flex;
  margin-top: 0.3rem;
  justify-content: space-between;
}
.point .pie {
  width: 5rem;
  height: 3.5rem;
  margin-left: -0.25rem;
}
.point .data {
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  width: 2.6rem;
  height: 3.5rem;
  padding: 0.2rem 0.375rem;
  box-sizing: border-box;
  background-image: url(../../assets/image/bg.png);
  background-size: cover;
}
.point .data .item{
  margin-top: 0.33rem;
}
.point h3 {
  margin-bottom: 0.15rem;
  font-size: 0.35rem;
  color: #fff;
}
.point span {
  display: block;
  color: #4c9bfd;
  font-size: 0.27rem;
  margin: 0 0.1rem 0 0.15rem;
}
.item > h4 {
  font-size: 0.43rem;
  color: #fff;
  font-weight: 400;
  padding: 0.1rem 0 0.1rem 0.1rem;
}
.icon-dot {
  display: inline-block;
  width: 4.5px;
  height: 11px;
  border-radius: 4px;
}
</style>